import {XgPlayer} from "../index";

export class XgControlDefinitions {
  root!: HTMLElement;
  value = 0;
  constructor(private player: XgPlayer) {
    this.init();
  }
  private init() {
    const { resources } = this.player.config;
    const options = resources.map((item, index) => `<option value="${index}">${item.name}</option>`);
    this.root = document.createElement('div');
    this.root.className = 'select-wrap';
    this.root.innerHTML = `<select>${options}</select>`;
    const selectDom = this.root.getElementsByTagName('select')[0];
    if (selectDom) {
      selectDom.addEventListener('change', event => {
        const newVal = +(event.target as HTMLSelectElement).value;
        this.value = newVal;
        this.player.emitter.emit('resourceChange', resources[newVal].url);
      });
    }
  }
}
